<template>
	<div class="pane-group">
		<div class="label">
			<span class="label-content">
				<slot name="label" v-if="slots.label"></slot>
				<template v-else>{{ props.label }}</template>
			</span>
			<div class="tip flex-center" v-if="slots.tip || props.tip">
				<el-icon class="tip-icon"><QuestionFilled /></el-icon>
				<div class="tip-content">
					<span>
						<slot name="tip" v-if="slots.tip"></slot>
						<template v-else>{{ props.tip }}</template>
					</span>
				</div>
			</div>
		</div>
		<div class="content">
			<slot></slot>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useSlots } from 'vue';
import { QuestionFilled } from '@element-plus/icons-vue';
const slots = useSlots();

const props = defineProps({
	label: String,
	tip: String,
});
</script>

<style scoped lang="scss">
.pane-group {
	display: flex;
	&:not(:last-child) {
		margin-bottom: 15px;
	}

	.label {
		width: 160px;
		padding-right: 40px;
		display: flex;
		align-items: center;
		.label-content {
			font-weight: 600;
			font-size: 14px;
			line-height: 32px;
		}
		.tip {
			position: relative;
			margin-left: 4px;
			.tip-icon {
				color: var(--text-color-5);
				cursor: pointer;
			}
			&:hover {
				.tip-icon {
					color: var(--text-color-1);
				}
				.tip-content {
					display: block;
				}
			}
			.tip-content {
				display: none;
				position: absolute;
				top: 50%;
				left: 100%;
				transform: translateY(-50%);
				z-index: 999;

				border: 1px solid #000;
				padding: 10px 16px;
				background-color: var(--fill-color-5);
				box-shadow: 0 0 12px rgba(0, 0, 0, 16%);
				border-radius: 4px;
				width: 450px;
				font-size: 14px;
			}
		}
	}
	.content {
		flex: 1;
	}
}
</style>
